<template>
  <div class="pieCompareContainer">
      <!--电压等级分布-->
      <div class="pieItem">
          <div class="pieTitle">
            <span>
              电压等级分布
            </span>
          </div>
          <div class="pieDiv" id="voltageLevel"></div>
      </div>

      <!--行业分类分布-->
      <div class="pieItem">
        <div class="pieTitle">
          <span>
            行业分类分布
          </span>
        </div>
        <div class="pieDiv" id="category"></div>
      </div>

      <!--电源数量分布-->
      <div class="pieItem">
        <div class="pieTitle">
          <span>
            电源数量分布
          </span>
        </div>

        <div class="pieDiv" id="powerSupply"></div>
      </div>

      <!--功能因素考核标准-->
      <div class="pieItem">
        <div class="pieTitle">
          <span>
            功能因素考核标准
          </span>
        </div>

        <div class="pieDiv" id="functionalFactors"></div>
      </div>

      <!--缴费方式-->
      <div class="pieItem">
        <div class="pieTitle">
          <span>
            缴费方式
          </span>
        </div>

        <div class="pieDiv" id="paymentMethod"></div>
      </div>

      <!--空标签，占位 个数 一行最多个数 - 1-->
      <div class="pieItem"></div>
      <div class="pieItem"></div>
  </div>
</template>

<script>
let echarts = require('echarts/lib/echarts')
// 引入柱状图组件
require('echarts/lib/chart/pie')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
// require('echarts/lib/component/legend')
export default {
  data () {
    return {
      visible: false
    }
  },
  created () {},
  mounted () {
    this.queryPie()
  },
  methods: {
    queryPie () {
      // eslint-disable-next-line
      // $WebEngine.CallService({
      //   // eslint-disable-next-line
      //   url: ctx + url,
      //   data: {
      //     comType: type,
      //     time: val
      //   }
      // }, function (resultObj) {
      var data = [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'},
        {value: 234, name: '联盟广告'},
        {value: 135, name: '视频广告'},
        {value: 1548, name: '搜索引擎'}
      ]
      this.drawPie('voltageLevel', data, '电压等级分布')
      this.drawPie('category', data, '行业分类分布')
      this.drawPie('powerSupply', data, '电源数量分布')
      this.drawPie('functionalFactors', data, '功能因素考核标准')
      this.drawPie('paymentMethod', data, '缴费方式')

      //   }
      // })
    },
    // 实现饼图
    drawPie (id, data, title) {
      // 基于准备好的dom，初始化echarts实例
      let pieChart = echarts.init(document.getElementById(id))
      // 绘制图表
      let option = {
        // title: {
        //   text: '某站点用户访问来源',
        //   subtext: '纯属虚构',
        //   x: 'center'
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left',
        //   data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
        // },
        color: ['#fc430b', '#5cd4d5', '#ffac38', '#78c651', '#389161'],
        series: [
          {
            name: title,
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: data,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      pieChart.setOption(option)
    }
  }
}
</script>

<style lang="stylus">
  .pieCompareContainer
    display: flex
    justify-content: center
    flex-wrap: wrap
    .pieItem
      width: 33.333%
      min-width: 400px
      max-width: 50%
      box-sizing: border-box
      .pieDiv
        height: 360px
      &:not(:nth-child(3n))
        .pieDiv::after
          content: ''
          width: 1px
          position: absolute
          height: 360px
          top 50%
          right 0
          transform: translate(0, -50%)
          background: #ccc
          background: -webkit-gradient(radial, 0 180, 0, 0 180, 180, from(#ddd), to(rgba(0,0,0,0)))
      .pieTitle
        height: 38px
        line-height: 38px
        text-align: left
        border-bottom: 1px solid #ccc
        span
          border-left: 2px solid #01b495
          padding-left: 8px
          color #01b495
          font-size: 14px
    .pieItem:empty
      height: 0
      border 0
</style>
